const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //将css打包成css文件，html可以使用link标签引用
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); //将css进行压缩
const TerserPlugin = require("terser-webpack-plugin");

// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;

module.exports = {
    // 入口
    // 相对路径和绝对路径都行
    entry: "./src/main.js",
    // 输出
    output: {
        // path: 文件输出目录，必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname 当前文件的文件夹绝对路径
        path: undefined,
        // filename: 输出文件名
        filename: "static/js/main.js",
        // 自动清空上次打包内容
        // 原理，在打包前，将整个path目录内容清空，再进行打包。
        // clean: true
    },
    // 加载器
    module: {
        rules: [
         {
            oneOf: [
                {
                    test: /\.css$/i,
                    use: ["style-loader", "css-loader"],
                },
                {
                    test: /\.less$/i,
                    use: [
                      // compiles Less to CSS
                      'style-loader',
                      'css-loader',
                      'less-loader',
                    ],
                },
                {
                    test: /\.s[ac]ss$/i,
                    use: [
                      // 将 JS 字符串生成为 style 节点
                      'style-loader',
                      // 将 CSS 转化成 CommonJS 模块
                      'css-loader',
                      // 将 Sass 编译成 CSS
                      'sass-loader',
                    ],
                },
                {
                    test: /\.styl$/,
                    use: ["style-loader", "css-loader", "stylus-loader"], // 将 Stylus 文件编译为 CSS
                },
                {
                    test: /\.(png|jpe?g|gif|webp)$/,
                    type: "asset",
                    parser: {
                        dataUrlCondition: {
                        maxSize: 12 * 1024 // 小于12kb的图片会被base64处理
                        }
                    },
                    generator: {
                        // 将图片文件输出到 static/imgs 目录中
                        // 将图片文件命名 [hash:8][ext][query]
                        // [hash:8]: hash值取8位
                        // [ext]: 使用之前的文件扩展名
                        // [query]: 添加之前的query参数
                        filename: "static/imgs/[hash:8][ext][query]",
                      },
                } ,
                {
                    test: /\.(ttf|woff|woff2|mp3|mp4|avi)$/,
                    type: "asset/resource",
                    generator: {
                        filename: "static/media/[hash:8][ext][query]",
                      },
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/, // 排除node_modules代码不编译
                    // include: path.resolve(__dirname, "../src"), // 也可以用包含
                   use: [
                    {
                        loader: "thread-loader", // 开启多进程
                        options: {
                          workers: threads, // 数量
                        }
                    },
                    {
                        loader: "babel-loader",
                        options: {
                            cacheDirectory: true, // 开启babel编译缓存
                            cacheCompression: false,// 缓存文件不要压缩
                            plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                        },
                        
                    }
                   ]
                },
            ]
         }
        ],
    },
    // 插件
    plugins: [
        new ESLintWebpackPlugin({
            context: path.resolve(__dirname, "../src"),
            exclude: "node_modules", // 默认值
            cache: true,
             // 缓存目录
            cacheLocation: path.resolve(__dirname,"../node_modules/.cache/.eslintcache"),
            threads
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "../public/index.html")
        }),
        // 提取css成单独文件
        new MiniCssExtractPlugin({
        // 定义输出文件名和目录
        filename: "static/css/main.css"
        }),
        // css压缩
        // new CssMinimizerPlugin(),
    ],
    optimization: {
        minimize: true,
        minimizer: [
            // css压缩也可以写到optimization.minimizer里面，效果一样的
            new CssMinimizerPlugin(),
            // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
            new TerserPlugin({
            parallel: threads // 开启多进程
      })
    ],
    },
    // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "8080", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
  },
    // 模式
    mode: "development", //开发模式，
    devtool: "cheap-module-source-map",
}